<template>
<h2>Home计数：{{counter}}</h2>
  <button v-on:click="increment">+1</button>
  <button v-on:click="decrement">-1</button>

  <hr>
  <button v-on:click="popularClick">首页-流行</button>
  <button v-on:click="hotClick">首页-热门</button>
  <button v-on:click="songClick">首页-歌单</button>

  <div class="scroll" style="width: 2000px;">
    <h2>
      x: {{scrollPosition.x}}
    </h2>
    <h2>
      y: {{scrollPosition.y}}
    </h2>
  </div>
</template>

<script>
import useScrollPosition from "../hooks/useScrollPosition.js";
import useTitle from '../hooks/useTitle'
import useCounter from '../hooks/useCounter.js'
export default {
  name: "Home",
  setup(props,context){
    const {title} = useTitle('首页')

    function popularClick(){
      title.value='首页-流行'
    }

    function hotClick(){
      title.value='首页-热门'
    }

    function songClick(){
      title.value='首页-歌单'
    }

    return{
      ...useCounter(),
      popularClick,
      hotClick,
      songClick,
      ...useScrollPosition()
    }
  }
}
</script>

<style scoped>

</style>